import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import {message } from "antd";
import "./News.less";
import {
  SoundTwoTone,
  VerticalAlignTopOutlined,
  ContactsTwoTone,
  ProjectTwoTone,
} from "@ant-design/icons";
import { Card, Col, Row, Progress } from "antd";
import BarEchart from "../../../components/BarEchart/BarEchart";
import ShufflingForm from "../../../components/ShufflingForm/ShufflingForm";
import http from "../../../utils/http";
import store from "../../../store/store";

export default function News() {
  const [addChecked, setAddChecked] = useState(false);
  const [earningsChecked, setEarningsChecked] = useState(false);
  const [todaydata, setTodaydata] = useState({});
  const [newoder, setNewoder] = useState({});
  const [alloder, setAlloder] = useState({});
  const [newsgoods, setNewsgoods] = useState([]);
  const[barshow,setBarshow] = useState(true);
  const[orderNum,setorderNum] = useState(0);
  const[orderConvert,setorderConvert] = useState(0);
  const[todayOrders,settodayOrders] = useState(0);

  var now = new Date();
  var date = now.getDate(); //得到日期

  useEffect(() => {
    //获取今日数据
    let usermsg = JSON.parse(sessionStorage.getItem("user"))||{};
    http({
      url: "api/index/titleTime",
      method: "get",
      params: { aid: usermsg.id },
    }).then((res) => {
      if (res.code == "200") {
      
        setTodaydata(res.data);
      }
    });

    // 获取订单数据
    http({
      url: "api/index/countOrderData",
      method: "get",
    }).then((res) => {
      if (res.code == 200) {
        setNewoder(res.date.new);
        setAlloder(res.date.total);
      }
    });

    //获取今日浏览量数据
    http({
      url: "apb/PortalOrder/seeHowMuch",
      method: "post",
    }).then((res) => {
      console.log('浏览量',res);
      const see = res.see;
     //获取实时播报
      http({
        url: "api/index/realNews",
        method: "get",
        params: { l: see },
      }).then((res1) => {
        console.log('实时播报',res1);
        if(res1.code=200){
          console.log('123456',res1);
          if(res1.data) {
            setorderNum(res1.data.orderNum)
            setorderConvert(res1.data.orderConvert)
            settodayOrders(res1.data.todayOrders)
          }
        }
      });
    });

      //获取新品入库数据
      http({
        url: "api/goods/newGoodsList",
        method: "post",
      }).then((res) => {
        if(res.code=200){
          console.log(res);
          setNewsgoods(res.data)
        }
      });

  }, []);

  const newarrival =(id)=>{
    console.log(id);
    //上架商品
    http({
      url: "api/goods/updateStatus",
      method: "post",
      params:{id,status:1}
    }).then((res) => {
      console.log(res);
      if(res.code=200){
        message.success("上架成功");
        setNewsgoods(res.data)
      }else{
        message.error("上架失败");
      }
    });
  }

  return (
    <div className="site-card-wrapper">
      <Row gutter={[16, 16]}>
        <Col span={10}>
          <Row gutter={[16, 16]}>
            <Col span={12}>
              <Link to={"/home/homepage/newdata"}>
                <Card
                  className="hp_cardLeftTop"
                  onMouseOver={() => {
                    setAddChecked(true);
                  }}
                  onMouseOut={() => {
                    setAddChecked(false);
                  }}
                >
                  <div className="hp_news">
                    <span className="icon">
                      <ContactsTwoTone twoToneColor="#eb2f96" />
                    </span>

                    <span className="text">
                      <span>{todaydata.newUsers}</span> 人
                      <p className={addChecked ? "pActive" : ""}>
                        {addChecked ? "查看更新数据" : "今日新增人数"}
                      </p>
                    </span>
                  </div>
                </Card>
              </Link>
            </Col>
            <Col span={12}>
              <Link to={"/home/homepage/earnings"}>
                <Card
                  className="hp_cardLeftTop"
                  onMouseOver={() => {
                    setEarningsChecked(true);
                  }}
                  onMouseOut={() => {
                    setEarningsChecked(false);
                  }}
                >
                  <div className="hp_news">
                    <span className="icon">
                      <ProjectTwoTone twoToneColor="#eb2f96" />
                    </span>
                    <span className="text">
                      <span>{todaydata.profit}</span> 元
                      <p className={earningsChecked ? "pActive" : ""}>
                        {earningsChecked ? "查看更多数据" : "今日收益数据"}
                      </p>
                    </span>
                  </div>
                </Card>
              </Link>
            </Col>
            <Col span={24}>
              <Card className="hp_cardLeftDown">
                <p className="title">订单数据统计</p>
                <div id="thead">
                  <span>昨日新增订单</span>
                  <span>累计新增订单总数</span>
                </div>
                <div id="jindu">
                  <span>{newoder[date + "日"]} </span>
                  <Progress
                    percent={(newoder[date + "日"]*100) / (alloder[date + "日"])}
                    showInfo={false}
                    strokeColor="#108ee9"
                    trailColor="#87d068"
                    strokeLinecap="square"
                    strokeWidth={40}
                  />
                  <span>{alloder[date + "日"]}</span>
                </div>
               
                <button style={{backgroundColor:'#1890ff',border:0,color:'white',textAlign:'right',borderRadius:'20%'}} onClick={()=>{setBarshow(!barshow)}}>{barshow?'新增':'累计'}</button>
 
        
                <BarEchart barData={barshow?newoder:alloder} />
              </Card>
            </Col>
          </Row>
          <Row gutter={16}></Row>
        </Col>
        <Col span={14}>
          <Card className="hp_cardRight">
            <p className="title">实时播报</p>
            <div className="thead">
              <div className="headLeft">
                <span className="icon">
                  <SoundTwoTone twoToneColor="#eb2f96" />
                </span>
                <div className="news">
                  <span className="num">{orderNum}</span>
                  <p>今天下单数</p>
                </div>
              </div>
              <div>
                <Progress
                  type="circle"
                  percent={orderConvert||0}
                  format={(percent) => `下单转化率 ${Math.round((orderConvert||0)*100)/100} %`}
                />
              </div>
            </div>
            <div
              id="box"
              style={{ height: "550px", overflow: "scroll", width: "100%" }}
            >
              <ShufflingForm data={todayOrders}/>
             
            </div>
          </Card>
        </Col>
        <Col span={24}>
          <Card className="hp_cardDown">
            <p className="title">新品入库</p>
            <div id="goods">
              {
                (newsgoods||[]).map((item)=>{
                  return (
                     <div className="goodsOne">
                <img src={item.img} alt="" style={{width:'200px',height:'200px'}}/>
                <p className="price">￥{item.price}</p>
                <span>预计收入{item.profit}元</span>
                <div className="hp_mask">
                  <p onClick={newarrival.bind(this,item.id)}>
                    <span>
                      <VerticalAlignTopOutlined />
                    </span>
                    <span>上架</span>
                  </p>
                </div>
              </div>
                  )
                })
              }
            </div>
          </Card>
        </Col>
      </Row>
    </div>
  );
}
